<template>
	<view class="page">
		<uni-forms ref="baseForm" :rules="rules" :modelValue="formData" label-position="top" label-width="200">
			<uni-forms-item label="店名" required name="shop_name" >
				<uni-easyinput v-model="formData.shop_name" placeholder="请输入店名" />
			</uni-forms-item>
			<uni-forms-item label="电话" required name="phone" >
				<uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="简介" name="introduction">
				<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入店铺简介" />
			</uni-forms-item>
			<uni-forms-item label="是否营业" name="trade">
				<switch :checked="formData.trade" color="#343434" style="transform:scale(0.8)" />
			</uni-forms-item>
			<uni-forms-item label="功能" required name="gongneng" >
				<uni-data-checkbox v-model="formData.gongneng" selectedColor="#343434" multiple :localdata="hobbys" />
			</uni-forms-item>
			<uni-forms-item label="首页轮播图" name="index_banner">
				<uni-file-picker @delete="delImage" :image-styles="{'width': '320rpx', 'height': '288rpx'}" file-mediatype="image" :limit="5" return-type="array" v-model="formData.index_banner" />
			</uni-forms-item>
			<uni-forms-item label="点餐页面轮播图" name="order_banner">
				<uni-file-picker @delete="delImage" :image-styles="{'width': '230rpx', 'height': '130rpx'}" file-mediatype="image" :limit="5" return-type="array" v-model="formData.order_banner" />
			</uni-forms-item>
			<uni-forms-item label="个人中心背景图" name="user_banner">
				<uni-file-picker @delete="delImage" :image-styles="{'width': '320rpx', 'height': '300rpx'}" file-mediatype="image" :limit="1" return-type="array" v-model="formData.user_banner" />
			</uni-forms-item>
		</uni-forms>
		<view class="save-btn">
			<button type="info" size="mini" @click="submit('baseForm')">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					_id: '',
					shop_name: '',
					phone: '',
					introduction: '',
					trade: true,
					gongneng: [],
					index_banner: [],
					order_banner: [],
					user_banner: []
				},
				// 多选数据源
				hobbys: [{
					text: '门店自取',
					value: 0
				}, {
					text: '外卖',
					value: 1
				}, {
					text: '扫码点餐',
					value: 2
				}],
				rules: {
					shop_name: {
						rules: [{
							required: true,
							errorMessage: '店名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}]
					},
					gongneng: {
						rules: [{
							required: true,
							errorMessage: '请选择您需要的功能'
						}]
					}
				},
			}
		},
		onReady() {
			this.get()
		},
		onShow() {},
		methods: {
			save(data) {
				uni.showLoading({
					mask: true
				})
				const shopConfig = uniCloud.importObject("shop-config")
				shopConfig.addOrUpdate(data).then(res=>{
					const { errMsg, errCode } = res
					if(errCode == 0) {
						uni.showToast({
							icon: 'none',
							title: errMsg || '提交成功'
						})
						uni.redirectTo({
							url: '/pages/business/business'
						})
					} else {
						uni.showModal({
							content: errMsg || '请求失败',
							showCancel: false
						})
					}
				}).catch(({ errMsg }) => {
					uni.showModal({
						content: errMsg || '请求失败',
						showCancel: false
					})
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			get() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const shopConfig = uniCloud.importObject("shop-config")
				shopConfig.get().then(res=>{
					console.log(res);
					const { errMsg, errCode, data } = res
					if(errCode == 0) {
						if(data && data.length) {
							that.formData = data[0]
						}
					} else {
						uni.showModal({
							content: errMsg || '请求失败',
							showCancel: false
						})
					}
				}).catch(({ errMsg }) => {
					uni.showModal({
						content: errMsg || '请求失败',
						showCancel: false
					})
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			/**
			 * 删除图片 
			 */
			delImage(e) {
				console.log(e);
				uniCloud.callFunction({
					name: 'delete-file',
					data: {
						fileID: e.tempFile.url
					}
				})
				.then(res => {
					console.log(res);
					if (res.errCode == 0 && res.success) {
						uni.showToast({
							title: "删除成功",
						});
					}
				});
			},
			submit(name) {
				this.$refs[name].validate().then(res => {
					console.log('success', res, this.formData);
					this.save(this.formData)
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: `必填项不能为空`
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 15px;
		.save-btn {
			padding: 0 30rpx;
			margin-top: 60rpx;
			
			button {
				width: 100%;
				font-size: $font-size-extra-lg;
			}
		}
	}
</style>